<!--  -->
<template>
  <div class="flex column grow">
    <div class="top flex column grow">
      <yn-title>
        <template slot="icon">
          <img
            src="../images/tcjg.png"
            @error="
              imageHandler(path + '/client/ylHome/images/tcjg.png', $event)
            "
          />
        </template>
        <div slot="right" @click="more" style="cursor: pointer">查看更多>></div>
      </yn-title>
      <div class="content flex column grow">
        <div class="noMore flex column grow" v-if="stockList0.length == 0">
          <div class="noMoreBg">暂无数据</div>
        </div>
        <table v-if="stockList0.length > 0">
          <thead>
            <tr>
              <td>股票代码</td>
              <td>股票名称</td>
              <td>入选时间</td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in stockList0"
              :key="item.id"
              @click="link(item.marketCode, item.stockCode)"
            >
              <td>{{ item.stockCode }}</td>
              <td>{{ item.stockName }}</td>
              <td>{{ item.createTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="middle flex column grow">
      <yn-title>
        <template slot="icon">
          <img
            src="../images/zljg.png"
            @error="
              imageHandler(path + '/client/ylHome/images/zljg.png', $event)
            "
          />
        </template>
        <div slot="right" @click="more" style="cursor: pointer">查看更多>></div>
      </yn-title>
      <div class="content flex grow column">
        <div class="noMore flex column grow" v-if="stockList1.length == 0">
          <div class="noMoreBg">暂无数据</div>
        </div>
        <table v-if="stockList1.length > 0">
          <thead>
            <tr>
              <td>股票代码</td>
              <td>股票名称</td>
              <td>入选时间</td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in stockList1"
              :key="item.id"
              @click="link(item.marketCode, item.stockCode)"
            >
              <td>{{ item.stockCode }}</td>
              <td>{{ item.stockName }}</td>
              <td>{{ item.createTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="buttom flex column grow">
      <yn-title>
        <div slot="right" @click="more" style="cursor: pointer">查看更多>></div>
      </yn-title>
      <div class="content flex grow column">
        <div class="noMore flex column grow" v-if="stockList2.length == 0">
          <div class="noMoreBg">暂无数据</div>
        </div>
        <table v-if="stockList2.length > 0">
          <thead>
            <tr>
              <td>股票代码</td>
              <td>股票名称</td>
              <td>入选时间</td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in stockList2"
              :key="item.id"
              @click="link(item.marketCode, item.stockCode)"
            >
              <td>{{ item.stockCode }}</td>
              <td>{{ item.stockName }}</td>
              <td>{{ item.createTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  showStrategyStockPoolColumn,
  getStrategyStockPoolList,
} from "../api/index";
import format from "date-fns/format";
import * as fn from "../script/utils";
import { CLIENT } from "@/common/const";

export default {
  data() {
    return {
      stockList0: [],
      stockList1: [],
      stockList2: [],
      path: CLIENT,
      imageHandler: fn.imageHandler,
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.showStrategyStockPoolColumn();
  },

  methods: {
    more() {
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"goto-stock-pool","data":{}}]`
      );
    },
    link(type, code) {
      type = type == "SS" ? "1" : "0";
      window.prompt(
        "",
        `up://["open.stock",${Date.now()},{"setcode":"${type}","code":"${code}","type":"首页"}]`
      );
    },
    async showStrategyStockPoolColumn() {
      await showStrategyStockPoolColumn().then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.getStrategyStockPoolList(0, data[0].cId);
          this.getStrategyStockPoolList(1, data[1].cId);
          this.getStrategyStockPoolList(2, data[2].cId);
        }
      });
    },
    async getStrategyStockPoolList(index, id) {
      const { token } = fn.getUrlParams();
      await getStrategyStockPoolList({
        productId: window.localStorage.getItem("productId"),
        limit: 5,
        cId: id,
        clientCentralToken: token,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const holder = Array.from({ length: 5 }, () => ({
            stockCode: "--",
            stockName: "--",
            createTime: "--",
            id: Date.now(),
          }));

          const dataHandler = (item) => {
            item.createTime = format(new Date(item.createTime), "YYYY-MM-DD");
            return item;
          };

          this["stockList" + index] = data
            .map(dataHandler)
            .concat(holder)
            .splice(0, 5);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  overflow-y: auto;
  .noMore {
    flex-direction: row; /* 子元素横向排列 */
    justify-content: center; /* 相对父元素水平居中 */
    align-items: center; /*  子元素相对父元素垂直居中 */
    .noMoreBg {
      color: #bcbfc4;
      font-size: 16px;
    }
  }
  table {
    box-sizing: border-box;
    line-height: 41px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #bcbfc4;
    border: 1px solid #323337;

    td {
      border: 1px solid #323337;
    }
    thead {
      background: #232429;
    }
    tbody tr:hover {
      background: #323337;
    }
  }
}
</style>
